<template>
    <div class="Header_Root">
        <div class="Tag">
            <slot></slot>
        </div>
        <div class="Handle">
            <div class="content">
                <!-- <el-avatar :size="50" :src="circleUrl" /> -->
                <avatar :imageUrl="AvatarURL" size="50px"></avatar>
                <div class="info">
                    <span class="name">{{ store.userInfo.nickname }}</span>
                    <span class="name logOut" @click="LogOut()">退出登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, toRefs, computed, reactive } from 'vue'
import { UserInfoStore } from '../stores/userInfo.js'
import Avatar from './Avatar.vue';
import ImagePreviewer from './ImagePreviewer.vue';
import devURL from '../Config/NetBaseConfig.js'

const state = reactive({
    circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large']
})

const { circleUrl, squareUrl, sizeList } = toRefs(state)

const store = UserInfoStore()

let props = defineProps({
    name: {
        type: String,
        default: '管理员一号'
    },
    avatar: {
        type: String,
    }
})

const AvatarURL=computed(()=>{
    //TODO:注意一下这个头像的URL地址
    return `${devURL}${store.userInfo.avatar}`
})

let emits = defineEmits(['logOut'])

let data = computed(() => {
    return toRefs(props)
})

const LogOut = () => {
    emits('logOut')
}

</script>

<style lang='less' scoped>
.Header_Root {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .Tag {
        height: 100%;
        flex:1;
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .Handle {
        height: 100%;
        flex: 2;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .content {
            display: flex;


            .info {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: start;
                margin-left: 1rem;
                margin-right: 2rem;

                .name {
                    font-size: 0.7rem;
                    user-select: none;
                }

                .logOut {
                    color: red;
                    user-select: none;
                    cursor: pointer;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>